<template>
  <div>
    <!-- 第一行 -->
    <el-row :gutter="10">
      <el-col :span="12">
        <span style="color: red">说明：目前支持学科和关键字条件筛选</span>
      </el-col>
      <el-col :span="12">
        <el-col :span="4" :push="20">
          <div class="grid-content bg-purple">
            <el-button type="success" icon="el-icon-edit" @click="addUserFn">
              新增试题
            </el-button>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row :gutter="10">
      <el-col :span="6">
        <el-col :span="6">
          <div class="grid-content bg-purple div_text">学科</div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-select
              v-model="baseQueObj.subjectID"
              placeholder="请选择"
              @change="subjectChangeFn"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
      </el-col>
      <el-col :span="6">
        <el-col :span="6">
          <div class="grid-content bg-purple div_text">二级目录</div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-select v-model="baseQueObj.catalogID" placeholder="请选择">
              <el-option
                v-for="item in catalogList"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id"
              />
            </el-select>
          </div>
        </el-col>
      </el-col>
      <el-col :span="6">
        <el-col :span="6">
          <div class="grid-content bg-purple div_text">标签</div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-select v-model="baseQueObj.tags" placeholder="请选择">
              <el-option
                v-for="item in tagList"
                :key="item.id"
                :label="item.tagName"
                :value="item.id"
              />
            </el-select>
          </div>
        </el-col>
      </el-col>
      <el-col :span="6">
        <el-col :span="6">
          <div class="grid-content bg-purple div_text">关键字</div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-input v-model="baseQueObj.keyword" placeholder="请输入内容" />
          </div>
        </el-col>
      </el-col>
    </el-row>
    <!-- 第三行 -->
    <el-row :gutter="10">
      <el-col :span="6">
        <el-col :span="6">
          <div class="grid-content bg-purple div_text">试题类型</div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-select v-model="baseQueObj.questionType" placeholder="请选择">
              <el-option
                v-for="item in questionTypeList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </div>
        </el-col>
      </el-col>
      <el-col :span="6">
        <el-col :span="6">
          <div class="grid-content bg-purple div_text">难度</div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-select v-model="baseQueObj.difficulty" placeholder="请选择">
              <el-option
                v-for="item in difficultyList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </div>
        </el-col>
      </el-col>
      <el-col :span="6">
        <el-col :span="6">
          <div class="grid-content bg-purple div_text">方向</div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-select v-model="baseQueObj.direction" placeholder="请选择">
              <el-option
                v-for="item in directionList"
                :key="item.id"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </div>
        </el-col>
      </el-col>
      <el-col :span="6">
        <el-col :span="6">
          <div class="grid-content bg-purple div_text">录入人</div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-select v-model="baseQueObj.creatorID" placeholder="请选择">
              <el-option
                v-for="item in creatorList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              />
            </el-select>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <!-- 第四行 -->
    <el-row :gutter="10">
      <el-col :span="6">
        <el-col :span="6">
          <div class="grid-content bg-purple div_text">题目备注</div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-input v-model="baseQueObj.remarks" placeholder="请输入内容" />
          </div>
        </el-col>
      </el-col>
      <el-col :span="6">
        <el-col :span="6">
          <div class="grid-content bg-purple div_text">企业简称</div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-input v-model="baseQueObj.shortName" placeholder="请输入内容" />
          </div>
        </el-col>
      </el-col>
      <el-col :span="6">
        <el-col :span="6">
          <div class="grid-content bg-purple div_text">城市</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content bg-purple">
            <el-select
              v-model="baseQueObj.province"
              placeholder="请选择"
              @change="cityChangeFn"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.id"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content bg-purple">
            <el-select v-model="baseQueObj.city" placeholder="请选择">
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </div>
        </el-col>
      </el-col>
      <el-col :span="6">
        <el-col :span="6" :push="6">
          <div class="grid-content bg-purple">
            <el-button @click="clearFormFn">清除</el-button>
          </div>
        </el-col>

        <el-col :span="6" :push="6">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="checkResFn">搜索</el-button>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getDirectoryListApi,
  getSubjectListApi,
  getTagListApi,
  getUserListApi
} from '@/api/queBank'
import Const from '@/const/const'
export default {
  props: {
    baseQueObj: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 学科列表
      subjectList: [],
      // 目录列表
      catalogList: [],
      // 标签列表
      tagList: [],
      // 试题类型列表
      questionTypeList: [
        {
          id: 1,
          label: '单选'
        },
        {
          id: 2,
          label: '多选'
        },
        {
          id: 3,
          label: '简答'
        }
      ],
      // 难度列表
      difficultyList: [
        {
          id: 1,
          label: '简单'
        },
        {
          id: 2,
          label: '一般'
        },
        {
          id: 3,
          label: '困难'
        }
      ],
      // 方向列表
      directionList: [
        {
          id: 1,
          label: 'o2o'
        },
        {
          id: 2,
          label: '外包服务'
        },
        {
          id: 3,
          label: '企业服务'
        },
        {
          id: 4,
          label: '互联网金融'
        },
        {
          id: 5,
          label: '企业咨询'
        },
        {
          id: 6,
          label: '互联网'
        },
        {
          id: 7,
          label: '电子商务'
        },
        {
          id: 8,
          label: '其它'
        }
      ],
      // 录入人列表
      creatorList: [],
      // 城市列表
      provinceList: [
        {
          id: 0,
          label: '北京'
        },
        {
          id: 1,
          label: '上海'
        },
        {
          id: 2,
          label: '济南'
        },
        {
          id: 3,
          label: '西川'
        }
      ],
      // 区列表
      cityList: []
    }
  },
  created() {
    this.getSubjectList()
    this.getUserList()
  },
  methods: {
    // 当城市的值改变时-我们给地区列表赋值
    cityChangeFn(val) {
      console.log(val)
      if (val) {
        this.cityList = Const.cityList
      }
    },
    // 新增用户
    addUserFn() {
      this.$router.push('/questions/new')
    },
    // 清空搜索栏数据
    clearFormFn() {
      this.$emit('clearForm')
      this.cityList = []
    },
    // 搜索
    checkResFn() {
      const obj = {}
      for (const key in this.baseQueObj) {
        if (this.baseQueObj[key]) {
          obj[key] = this.baseQueObj[key]
        }
      }
      this.$emit('checkFn', obj)
    },
    // 获取学科列表
    async getSubjectList() {
      const res = await getSubjectListApi()
      this.subjectList = res.data
      this.$store.dispatch('queBank/getSubjectList', res.data)
    },
    // 学科改变时触发的操作-获取目录列表和标签列表
    subjectChangeFn(val) {
      this.getDirectoryList(val)
      this.getTagList(val)
    },
    // 获取目录列表
    async getDirectoryList(val) {
      const res = await getDirectoryListApi(val)
      this.catalogList = res.data.items
      this.$store.dispatch('queBank/getDirectoryList', res.data.items)
    },
    // 获取标签列表
    async getTagList(val) {
      const res = await getTagListApi(val)
      this.tagList = res.data.items
    },
    // 获取录入人列表
    async getUserList() {
      const res = await getUserListApi()
      this.creatorList = res.data.list
    }
  }
}
</script>

<style lang="scss" scoped>
.div_text {
  // font-size: 18px;
  text-align: center;
  line-height: 36px;
}
.el-col-6 {
  margin: 5px 0;
}
</style>
